<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Pieter P">
        <link rel="stylesheet" type="text/css" href="../CSS/main.css">
        <link href='../CSS/roboto.css' rel='stylesheet' type='text/css'>
        <link href='../CSS/icon.css' rel='stylesheet' type='text/css'>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <meta name="theme-color" content="#ccc">
        <title>A Beginner's Guide to the ESP8266</title>
    </head>
    <body>
        <nav>
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48" style="position:absolute;top:4px;right: 4px;">
                    <path d="M0 0h48v48h-48z" fill="none"/>
                    <path d="M6 36h36v-4h-36v4zm0-10h36v-4h-36v4zm0-14v4h36v-4h-36z"/>
                </svg>
                <h2>Index</h2>
                <ol>
<li><a href="Chap01 - ESP8266.html">Introduction</a></li>
<li><a href="Chap02 - Hardware.html">Hardware</a></li>
<li><a href="Chap03 - Software.html">Software</a></li>
<li><a href="Chap04 - Microcontroller.html">Microcontroller</a></li>
<li><a href="Chap05 - Network Protocols.html">Network protocols</a></li>
<li><a href="Chap06 - Uploading.html">Uploading</a></li>
<li><a href="Chap07 - Wi-Fi Connections.html">Wi-Fi connections</a></li>
<li><a href="Chap08 - mDNS.html">mDNS</a></li>
<li><a href="Chap09 - Web Server.html">Web servers</a></li>
<li><a href="Chap10 - Simple Web Server.html">Simple web server</a></li>
<li><a href="Chap11 - SPIFFS.html">SPIFFS</a></li>
<li><a href="Chap12 - Uploading to Server.html">Uploading to the server</a></li>
<li><a href="Chap13 - OTA.html">OTA</a></li>
<li><b>WebSocket</b></li>
<li><a href="Chap15 - NTP.html">NTP</a></li>
<li><a href="Chap16 - Data Logging.html">Data logging</a></li>
<li><a href="Chap17 - Email Notifier.html">Email notifier</a></li>
<li><a href="Chap18 - Advanced.html">Advanced</a></li>
<li><a href="Chap19 - In Conclusion.html">In conclusion</a></li>

                </ol>
                <a href="https://github.com/tttapa/ESP8266/raw/master/A%20Beginner's%20Guide%20to%20the%20ESP8266%20-%20article/PDF/A-Beginner's-Guide-to-the-ESP8266.pdf" title="Download the guide as a PDF document (automatically generated)">Download as PDF</a><br>
                <a href="https://github.com/tttapa/ESP8266/tree/master/Examples" title="Download all example code that's used in this guide">Download examples</a>
            </div>
        </nav>
        <article>

   <h2>WebSocket communication</h2>
   <div>
        Up until now, we've always used links (GET) and HTML forms (POST) to get data from the ESP, or to send data to it. This always resulted in a browser navigation action. There are many situations where you want to send data to the ESP without refreshing the page. 
   </div>
   <div>
        <br>
   </div>
   <div>
        One way to do this is by using AJAX and <a href="https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest">XMLHTTP requests</a>. The disadvantage is that you have to establish a new TCP connection for every message you send. This adds a load of latency.
   </div>
   <div>
        WebSocket is a technology that keeps the TCP connection open, so you can constantly send data back and forth between the ESP and the client, with low latency. And since it's TCP, you're sure that the packets will arrive intact. 
   </div>
   <h3>Controlling RGB LEDs from a web interface using WebSocket</h3>
   <div>
        To learn how to use WebSockets, I created this comprehensive example, it uses pretty much everything we've covered so far.<br>
   </div>
   <div>
        <br>
   </div>
   <div>
        The ESP hosts a webpage with three sliders to set the red, green and blue levels of an RGB LED (or LED strip). There's also a button to turn on a rainbow effect that cycles through the entire color wheel. Color data is transmitted from the browser to the ESP via a WebSocket connection. 
   </div>
   <div>
        You can connect to the ESP directly, using it as an AP, or let the ESP connect to a different AP. You can use mDNS to open the webpage, by browsing to <a href="http://esp8266.local">http://esp8266.local</a>.
   </div>
   <div>
        All files are stored in the ESP's SPIFFS, and you can upload new files, or update files via a <a href="http://esp8266.local/edit.html">web interface</a>. 
   </div>
   <div>
        You can also use the OTA service to upload new firmware (sketches) over Wi-Fi.
   </div>
   <h4>Improving readability</h4>
   <div>
        When dealing with large and complicated programs, it's a good idea to make abstraction of some things, and create functions with a descriptive name instead of endless lines of meaningless code. 
   </div>
   <div>
        <br>
   </div>
   <div>
        Even if you have lots of comments in your code, it'll be very hard to preserve an overview. Using functions will greatly improve the readability of your code.
   </div>
   <div>
        So just split up the code into different parts and move all pieces to functions at the bottom of your sketch, or even to different files. 
   </div>
   <p>In the following example, the setup was very long and cluttered, so I split it up into several different functions: one to connect to the Wi-Fi, one to start the OTA update service, one to start the SPIFFS ... and so on. </p>
   <h4>Downloading WebSockets for Arduino</h4>
   <div>
        We'll be using the arduinoWebSockets library by Links2004. Download it from <a href="https://github.com/Links2004/arduinoWebSockets">GitHub</a> and install it. (Sketch &gt; Include Library &gt; Add .ZIP Library...)
   </div>
   <h4>Libraries, constants and globals</h4>
   <div>
        At the top of the sketch we'll include the necessary libraries, create some global server and file objects like in the previous examples, and some constants for the host name, AP ssid, passwords, LED pins ...
   </div>
   <div>
       <pre><code><span style="color: #5e6d03;">#include</span> <span style="color: #434f54;">&lt;</span><span style="color: #d35400;">ESP8266WiFi</span><span style="color: #434f54;">.</span><span style="color: #000000;">h</span><span style="color: #434f54;">&gt;</span>
<span style="color: #5e6d03;">#include</span> <span style="color: #434f54;">&lt;</span><span style="color: #000000;">ESP8266WiFiMulti</span><span style="color: #434f54;">.</span><span style="color: #000000;">h</span><span style="color: #434f54;">&gt;</span>
<span style="color: #5e6d03;">#include</span> <span style="color: #434f54;">&lt;</span><b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">h</span><span style="color: #434f54;">&gt;</span>
<span style="color: #5e6d03;">#include</span> <span style="color: #434f54;">&lt;</span><b><span style="color: #d35400;">ESP8266WebServer</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">h</span><span style="color: #434f54;">&gt;</span>
<span style="color: #5e6d03;">#include</span> <span style="color: #434f54;">&lt;</span><b><span style="color: #d35400;">ESP8266mDNS</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">h</span><span style="color: #434f54;">&gt;</span>
<span style="color: #5e6d03;">#include</span> <span style="color: #434f54;">&lt;</span><span style="color: #000000;">FS</span><span style="color: #434f54;">.</span><span style="color: #000000;">h</span><span style="color: #434f54;">&gt;</span>
<span style="color: #5e6d03;">#include</span> <span style="color: #434f54;">&lt;</span><span style="color: #000000;">WebSocketsServer</span><span style="color: #434f54;">.</span><span style="color: #000000;">h</span><span style="color: #434f54;">&gt;</span>

<span style="color: #000000;">ESP8266WiFiMulti</span> <span style="color: #000000;">wifiMulti</span><span style="color: #000000;">;</span>       <span style="color: #434f54;">// Create an instance of the ESP8266WiFiMulti class, called 'wifiMulti'</span>

<b><span style="color: #d35400;">ESP8266WebServer</span></b> <span style="color: #000000;">server</span><span style="color: #000000;">(</span><span style="color: #000000;">80</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>       <span style="color: #434f54;">// Create a webserver object that listens for HTTP request on port 80</span>
<span style="color: #000000;">WebSocketsServer</span> <span style="color: #000000;">webSocket</span><span style="color: #000000;">(</span><span style="color: #000000;">81</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>    <span style="color: #434f54;">// create a websocket server on port 81</span>

<span style="color: #d35400;">File</span> <span style="color: #000000;">fsUploadFile</span><span style="color: #000000;">;</span>                 <span style="color: #434f54;">// a File variable to temporarily store the received file</span>

<span style="color: #00979c;">const</span> <span style="color: #00979c;">char</span> <span style="color: #434f54;">*</span><span style="color: #000000;">ssid</span> <span style="color: #434f54;">=</span> <span style="color: #005c5f;">"ESP8266 Access Point"</span><span style="color: #000000;">;</span> <span style="color: #434f54;">// The name of the Wi-Fi network that will be created</span>
<span style="color: #00979c;">const</span> <span style="color: #00979c;">char</span> <span style="color: #434f54;">*</span><span style="color: #000000;">password</span> <span style="color: #434f54;">=</span> <span style="color: #005c5f;">"thereisnospoon"</span><span style="color: #000000;">;</span>   <span style="color: #434f54;">// The password required to connect to it, leave blank for an open network</span>

<span style="color: #00979c;">const</span> <span style="color: #00979c;">char</span> <span style="color: #434f54;">*</span><span style="color: #000000;">OTAName</span> <span style="color: #434f54;">=</span> <span style="color: #005c5f;">"ESP8266"</span><span style="color: #000000;">;</span>           <span style="color: #434f54;">// A name and a password for the OTA service</span>
<span style="color: #00979c;">const</span> <span style="color: #00979c;">char</span> <span style="color: #434f54;">*</span><span style="color: #000000;">OTAPassword</span> <span style="color: #434f54;">=</span> <span style="color: #005c5f;">"esp8266"</span><span style="color: #000000;">;</span>

<span style="color: #5e6d03;">#define</span> <span style="color: #000000;">LED_RED</span>     <span style="color: #000000;">15</span>            <span style="color: #434f54;">// specify the pins with an RGB LED connected</span>
<span style="color: #5e6d03;">#define</span> <span style="color: #000000;">LED_GREEN</span>   <span style="color: #000000;">12</span>
<span style="color: #5e6d03;">#define</span> <span style="color: #000000;">LED_BLUE</span>    <span style="color: #000000;">13</span>

<span style="color: #00979c;">const</span> <span style="color: #00979c;">char</span><span style="color: #434f54;">*</span> <span style="color: #000000;">mdnsName</span> <span style="color: #434f54;">=</span> <span style="color: #005c5f;">"esp8266"</span><span style="color: #000000;">;</span> <span style="color: #434f54;">// Domain name for the mDNS responder</span></code></pre>
   </div>
   <div>
        You should already be familiar with most of this code. The only new part is the WebSocket server library that is included, and the WebSocket server object, but this shouldn't be a problem.
   </div>
   <h4>Setup</h4>
   <div>
       <pre><code><span style="color: #00979c;">void</span> <span style="color: #5e6d03;">setup</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
  <span style="color: #d35400;">pinMode</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_RED</span><span style="color: #434f54;">,</span> <span style="color: #00979c;">OUTPUT</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>    <span style="color: #434f54;">// the pins with LEDs connected are outputs</span>
  <span style="color: #d35400;">pinMode</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_GREEN</span><span style="color: #434f54;">,</span> <span style="color: #00979c;">OUTPUT</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #d35400;">pinMode</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_BLUE</span><span style="color: #434f54;">,</span> <span style="color: #00979c;">OUTPUT</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>

  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">begin</span><span style="color: #000000;">(</span><span style="color: #000000;">115200</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>        <span style="color: #434f54;">// Start the Serial communication to send messages to the computer</span>
  <span style="color: #d35400;">delay</span><span style="color: #000000;">(</span><span style="color: #000000;">10</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\r\n"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>

  <span style="color: #000000;">startWiFi</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                 <span style="color: #434f54;">// Start a Wi-Fi access point, and try to connect to some given access points. Then wait for either an AP or STA connection</span>
  
  <span style="color: #000000;">startOTA</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                  <span style="color: #434f54;">// Start the OTA service</span>
  
  <span style="color: #000000;">startSPIFFS</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>               <span style="color: #434f54;">// Start the SPIFFS and list all contents</span>

  <span style="color: #000000;">startWebSocket</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>            <span style="color: #434f54;">// Start a WebSocket server</span>
  
  <span style="color: #000000;">startMDNS</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                 <span style="color: #434f54;">// Start the mDNS responder</span>

  <span style="color: #000000;">startServer</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>               <span style="color: #434f54;">// Start a HTTP server with a file read handler and an upload handler</span>
  
<span style="color: #000000;">}</span></code></pre>
   </div>
   <div>
        As you can see, the setup is now much more condensed and gives a much better overview of what it's doing. To understand the program, you don't have to know each individual step that is required to connect to a Wi-Fi network, it's enough to know that it <i>will </i>connect to a Wi-Fi network, because that's what the startWiFi function does.
   </div>
   <h4>Loop</h4>
   <div>
       <pre><code><span style="color: #00979c;">bool</span> <span style="color: #000000;">rainbow</span> <span style="color: #434f54;">=</span> <span style="color: #00979c;">false</span><span style="color: #000000;">;</span>             <span style="color: #434f54;">// The rainbow effect is turned off on startup</span>

<span style="color: #00979c;">unsigned</span> <span style="color: #00979c;">long</span> <span style="color: #000000;">prevMillis</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">millis</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
<span style="color: #00979c;">int</span> <span style="color: #000000;">hue</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">0</span><span style="color: #000000;">;</span>

<span style="color: #00979c;">void</span> <span style="color: #5e6d03;">loop</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
  <span style="color: #000000;">webSocket</span><span style="color: #434f54;">.</span><span style="color: #5e6d03;">loop</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                           <span style="color: #434f54;">// constantly check for websocket events</span>
  <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">handleClient</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                      <span style="color: #434f54;">// run the server</span>
  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">handle</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                        <span style="color: #434f54;">// listen for OTA events</span>

  <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">rainbow</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>                               <span style="color: #434f54;">// if the rainbow effect is turned on</span>
    <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #d35400;">millis</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #434f54;">&gt;</span> <span style="color: #000000;">prevMillis</span> <span style="color: #434f54;">+</span> <span style="color: #000000;">32</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>          
      <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #434f54;">++</span><span style="color: #000000;">hue</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">360</span><span style="color: #000000;">)</span>                        <span style="color: #434f54;">// Cycle through the color wheel (increment by one degree every 32 ms)</span>
        <span style="color: #000000;">hue</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">0</span><span style="color: #000000;">;</span>
      <span style="color: #000000;">setHue</span><span style="color: #000000;">(</span><span style="color: #000000;">hue</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                            <span style="color: #434f54;">// Set the RGB LED to the right color</span>
      <span style="color: #000000;">prevMillis</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">millis</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">}</span>
  <span style="color: #000000;">}</span>
<span style="color: #000000;">}</span></code></pre>
   </div>
   <div>
        Same goes for the loop: most of the work is done by the first <span style="font-size: 1em;">three </span><span style="font-size: 1em;">functions that handle the WebSocket communication, HTTP requests and OTA updates. When such an event happens, the appropriate handler functions will be executed. These are defined elsewhere.</span>
   </div>
   <div>
        <br>
   </div>
   <div>
        The second part is the rainbow effect. If it is turned on, it cycles through the color wheel and sets the color to the RGB LED. 
   </div>
   <div>
        If you don't understand why I use millis(), you can take a look at the <a href="https://www.arduino.cc/en/Tutorial/BlinkWithoutDelay">Blink Without Delay example</a>.
   </div>
   <h4>Setup functions</h4>
   <div>
       <pre><code><span style="color: #00979c;">void</span> <span style="color: #000000;">startWiFi</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// Start a Wi-Fi access point, and try to connect to some given access points. Then wait for either an AP or STA connection</span>
  <b><span style="color: #d35400;">WiFi</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">softAP</span><span style="color: #000000;">(</span><span style="color: #000000;">ssid</span><span style="color: #434f54;">,</span> <span style="color: #000000;">password</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>             <span style="color: #434f54;">// Start the access point</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Access Point \""</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #000000;">ssid</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\" started\r\n"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>

  <span style="color: #000000;">wifiMulti</span><span style="color: #434f54;">.</span><span style="color: #000000;">addAP</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"ssid_from_AP_1"</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"your_password_for_AP_1"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>   <span style="color: #434f54;">// add Wi-Fi networks you want to connect to</span>
  <span style="color: #000000;">wifiMulti</span><span style="color: #434f54;">.</span><span style="color: #000000;">addAP</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"ssid_from_AP_2"</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"your_password_for_AP_2"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">wifiMulti</span><span style="color: #434f54;">.</span><span style="color: #000000;">addAP</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"ssid_from_AP_3"</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"your_password_for_AP_3"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>

  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Connecting"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">while</span> <span style="color: #000000;">(</span><span style="color: #000000;">wifiMulti</span><span style="color: #434f54;">.</span><span style="color: #d35400;">run</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #434f54;">!=</span> <span style="color: #000000;">WL_CONNECTED</span> <span style="color: #434f54;">&amp;&amp;</span> <b><span style="color: #d35400;">WiFi</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">softAPgetStationNum</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #434f54;">&lt;</span> <span style="color: #000000;">1</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>  <span style="color: #434f54;">// Wait for the Wi-Fi to connect</span>
    <span style="color: #d35400;">delay</span><span style="color: #000000;">(</span><span style="color: #000000;">250</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #00979c;">'.'</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\r\n"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><b><span style="color: #d35400;">WiFi</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">softAPgetStationNum</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">0</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>      <span style="color: #434f54;">// If the ESP is connected to an AP</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Connected to "</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><b><span style="color: #d35400;">WiFi</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">SSID</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>             <span style="color: #434f54;">// Tell us what network we're connected to</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"IP address:\t"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><b><span style="color: #d35400;">WiFi</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">localIP</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>            <span style="color: #434f54;">// Send the IP address of the ESP8266 to the computer</span>
  <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #000000;">{</span>                                   <span style="color: #434f54;">// If a station is connected to the ESP SoftAP</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Station connected to ESP8266 AP"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\r\n"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">startOTA</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// Start the OTA service</span>
  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">setHostname</span><span style="color: #000000;">(</span><span style="color: #000000;">OTAName</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">setPassword</span><span style="color: #000000;">(</span><span style="color: #000000;">OTAPassword</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>

  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">onStart</span><span style="color: #000000;">(</span><span style="color: #000000;">[</span><span style="color: #000000;">]</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Start"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #d35400;">digitalWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_RED</span><span style="color: #434f54;">,</span> <span style="color: #000000;">0</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>    <span style="color: #434f54;">// turn off the LEDs</span>
    <span style="color: #d35400;">digitalWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_GREEN</span><span style="color: #434f54;">,</span> <span style="color: #000000;">0</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #d35400;">digitalWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_BLUE</span><span style="color: #434f54;">,</span> <span style="color: #000000;">0</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">onEnd</span><span style="color: #000000;">(</span><span style="color: #000000;">[</span><span style="color: #000000;">]</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\r\nEnd"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #000000;">onProgress</span><span style="color: #000000;">(</span><span style="color: #000000;">[</span><span style="color: #000000;">]</span><span style="color: #000000;">(</span><span style="color: #00979c;">unsigned</span> <span style="color: #00979c;">int</span> <span style="color: #000000;">progress</span><span style="color: #434f54;">,</span> <span style="color: #00979c;">unsigned</span> <span style="color: #00979c;">int</span> <span style="color: #000000;">total</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">printf</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Progress: %u%%\r"</span><span style="color: #434f54;">,</span> <span style="color: #000000;">(</span><span style="color: #000000;">progress</span> <span style="color: #434f54;">/</span> <span style="color: #000000;">(</span><span style="color: #000000;">total</span> <span style="color: #434f54;">/</span> <span style="color: #000000;">100</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">onError</span><span style="color: #000000;">(</span><span style="color: #000000;">[</span><span style="color: #000000;">]</span><span style="color: #000000;">(</span><span style="color: #000000;">ota_error_t</span> <span style="color: #000000;">error</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">printf</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Error[%u]: "</span><span style="color: #434f54;">,</span> <span style="color: #000000;">error</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">error</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">OTA_AUTH_ERROR</span><span style="color: #000000;">)</span> <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Auth Failed"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">error</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">OTA_BEGIN_ERROR</span><span style="color: #000000;">)</span> <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Begin Failed"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">error</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">OTA_CONNECT_ERROR</span><span style="color: #000000;">)</span> <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Connect Failed"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">error</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">OTA_RECEIVE_ERROR</span><span style="color: #000000;">)</span> <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Receive Failed"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">error</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">OTA_END_ERROR</span><span style="color: #000000;">)</span> <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"End Failed"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">ArduinoOTA</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">begin</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"OTA ready\r\n"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">startSPIFFS</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// Start the SPIFFS and list all contents</span>
  <span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">begin</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                             <span style="color: #434f54;">// Start the SPI Flash File System (SPIFFS)</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"SPIFFS started. Contents:"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">{</span>
    <span style="color: #000000;">Dir</span> <span style="color: #000000;">dir</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #000000;">openDir</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"/"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">while</span> <span style="color: #000000;">(</span><span style="color: #000000;">dir</span><span style="color: #434f54;">.</span><span style="color: #000000;">next</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>                      <span style="color: #434f54;">// List the file system contents</span>
      <span style="color: #00979c;">String</span> <span style="color: #000000;">fileName</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">dir</span><span style="color: #434f54;">.</span><span style="color: #000000;">fileName</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
      <b><span style="color: #d35400;">size_t</span></b> <span style="color: #000000;">fileSize</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">dir</span><span style="color: #434f54;">.</span><span style="color: #000000;">fileSize</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
      <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">printf</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\tFS File: %s, size: %s\r\n"</span><span style="color: #434f54;">,</span> <span style="color: #000000;">fileName</span><span style="color: #434f54;">.</span><span style="color: #000000;">c_str</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #434f54;">,</span> <span style="color: #000000;">formatBytes</span><span style="color: #000000;">(</span><span style="color: #000000;">fileSize</span><span style="color: #000000;">)</span><span style="color: #434f54;">.</span><span style="color: #000000;">c_str</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">}</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">printf</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\n"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">startWebSocket</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// Start a WebSocket server</span>
  <span style="color: #000000;">webSocket</span><span style="color: #434f54;">.</span><span style="color: #d35400;">begin</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                          <span style="color: #434f54;">// start the websocket server</span>
  <span style="color: #000000;">webSocket</span><span style="color: #434f54;">.</span><span style="color: #000000;">onEvent</span><span style="color: #000000;">(</span><span style="color: #000000;">webSocketEvent</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>          <span style="color: #434f54;">// if there's an incomming websocket message, go to function 'webSocketEvent'</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"WebSocket server started."</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">startMDNS</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// Start the mDNS responder</span>
  <b><span style="color: #d35400;">MDNS</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">begin</span><span style="color: #000000;">(</span><span style="color: #000000;">mdnsName</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                        <span style="color: #434f54;">// start the multicast domain name server</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"mDNS responder started: http://"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #000000;">mdnsName</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">".local"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">startServer</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// Start a HTTP server with a file read handler and an upload handler</span>
  <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">on</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"/edit.html"</span><span style="color: #434f54;">,</span>  <span style="color: #00979c;">HTTP_POST</span><span style="color: #434f54;">,</span> <span style="color: #000000;">[</span><span style="color: #000000;">]</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>  <span style="color: #434f54;">// If a POST request is sent to the /edit.html address,</span>
    <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">send</span><span style="color: #000000;">(</span><span style="color: #000000;">200</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"text/plain"</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">""</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span> 
  <span style="color: #000000;">}</span><span style="color: #434f54;">,</span> <span style="color: #000000;">handleFileUpload</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                       <span style="color: #434f54;">// go to 'handleFileUpload'</span>

  <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">onNotFound</span><span style="color: #000000;">(</span><span style="color: #000000;">handleNotFound</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>          <span style="color: #434f54;">// if someone requests any other file or page, go to function 'handleNotFound'</span>
                                              <span style="color: #434f54;">// and check if the file exists</span>

  <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">begin</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                             <span style="color: #434f54;">// start the HTTP server</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"HTTP server started."</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span></code></pre>
   </div>
   <div>
        These are the function definitions of the functions used in the setup. Nothing new here, apart from the startWebSocket function. You just have to start the WebSocket server using the begin method, and then give it a callback function that is executed when the ESP receives a WebSocket message.
   </div>
   <h4>Server handlers</h4>
   <div>
        This is the code that is executed on certain server-related events, like when an HTTP request is received, when a file is being uploaded, when there's an incoming WebSocket message ... etc. 
   </div>
   <div>
       <pre><code><span style="color: #00979c;">void</span> <span style="color: #000000;">handleNotFound</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span> <span style="color: #434f54;">// if the requested file or page doesn't exist, return a 404 not found error</span>
  <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #434f54;">!</span><span style="color: #000000;">handleFileRead</span><span style="color: #000000;">(</span><span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">uri</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span>          <span style="color: #434f54;">// check if the file exists in the flash memory (SPIFFS), if so, send it</span>
    <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">send</span><span style="color: #000000;">(</span><span style="color: #000000;">404</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"text/plain"</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"404: File Not Found"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">bool</span> <span style="color: #000000;">handleFileRead</span><span style="color: #000000;">(</span><span style="color: #00979c;">String</span> <span style="color: #000000;">path</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// send the right file to the client (if it exists)</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"handleFileRead: "</span> <span style="color: #434f54;">+</span> <span style="color: #000000;">path</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">path</span><span style="color: #434f54;">.</span><span style="color: #d35400;">endsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"/"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #000000;">path</span> <span style="color: #434f54;">+=</span> <span style="color: #005c5f;">"index.html"</span><span style="color: #000000;">;</span>          <span style="color: #434f54;">// If a folder is requested, send the index file</span>
  <span style="color: #00979c;">String</span> <span style="color: #000000;">contentType</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">getContentType</span><span style="color: #000000;">(</span><span style="color: #000000;">path</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>             <span style="color: #434f54;">// Get the MIME type</span>
  <span style="color: #00979c;">String</span> <span style="color: #000000;">pathWithGz</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">path</span> <span style="color: #434f54;">+</span> <span style="color: #005c5f;">".gz"</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">exists</span><span style="color: #000000;">(</span><span style="color: #000000;">pathWithGz</span><span style="color: #000000;">)</span> <span style="color: #434f54;">||</span> <span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">exists</span><span style="color: #000000;">(</span><span style="color: #000000;">path</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// If the file exists, either as a compressed archive, or normal</span>
    <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">exists</span><span style="color: #000000;">(</span><span style="color: #000000;">pathWithGz</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span>                         <span style="color: #434f54;">// If there's a compressed version available</span>
      <span style="color: #000000;">path</span> <span style="color: #434f54;">+=</span> <span style="color: #005c5f;">".gz"</span><span style="color: #000000;">;</span>                                         <span style="color: #434f54;">// Use the compressed verion</span>
    <span style="color: #d35400;">File</span> <span style="color: #000000;">file</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">open</span><span style="color: #000000;">(</span><span style="color: #000000;">path</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"r"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                    <span style="color: #434f54;">// Open the file</span>
    <b><span style="color: #d35400;">size_t</span></b> <span style="color: #000000;">sent</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #000000;">streamFile</span><span style="color: #000000;">(</span><span style="color: #000000;">file</span><span style="color: #434f54;">,</span> <span style="color: #000000;">contentType</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>    <span style="color: #434f54;">// Send it to the client</span>
    <span style="color: #000000;">file</span><span style="color: #434f54;">.</span><span style="color: #d35400;">close</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                                          <span style="color: #434f54;">// Close the file again</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #00979c;">String</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\tSent file: "</span><span style="color: #000000;">)</span> <span style="color: #434f54;">+</span> <span style="color: #000000;">path</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">return</span> <span style="color: #00979c;">true</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
  <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #00979c;">String</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"\tFile Not Found: "</span><span style="color: #000000;">)</span> <span style="color: #434f54;">+</span> <span style="color: #000000;">path</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>   <span style="color: #434f54;">// If the file doesn't exist, return false</span>
  <span style="color: #5e6d03;">return</span> <span style="color: #00979c;">false</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">handleFileUpload</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span> <span style="color: #434f54;">// upload a new file to the SPIFFS</span>
  <span style="color: #000000;">HTTPUpload</span><span style="color: #434f54;">&amp;</span> <span style="color: #000000;">upload</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #000000;">upload</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #00979c;">String</span> <span style="color: #000000;">path</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">upload</span><span style="color: #434f54;">.</span><span style="color: #d35400;">status</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">UPLOAD_FILE_START</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span>
    <span style="color: #000000;">path</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">upload</span><span style="color: #434f54;">.</span><span style="color: #000000;">filename</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #434f54;">!</span><span style="color: #000000;">path</span><span style="color: #434f54;">.</span><span style="color: #d35400;">startsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"/"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #000000;">path</span> <span style="color: #434f54;">=</span> <span style="color: #005c5f;">"/"</span><span style="color: #434f54;">+</span><span style="color: #000000;">path</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #434f54;">!</span><span style="color: #000000;">path</span><span style="color: #434f54;">.</span><span style="color: #d35400;">endsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">".gz"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>                          <span style="color: #434f54;">// The file server always prefers a compressed version of a file </span>
      <span style="color: #00979c;">String</span> <span style="color: #000000;">pathWithGz</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">path</span><span style="color: #434f54;">+</span><span style="color: #005c5f;">".gz"</span><span style="color: #000000;">;</span>                    <span style="color: #434f54;">// So if an uploaded file is not compressed, the existing compressed</span>
      <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">exists</span><span style="color: #000000;">(</span><span style="color: #000000;">pathWithGz</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span>                      <span style="color: #434f54;">// version of that file must be deleted (if it exists)</span>
         <span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">remove</span><span style="color: #000000;">(</span><span style="color: #000000;">pathWithGz</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">}</span>
    <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"handleFileUpload Name: "</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span> <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #000000;">path</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">fsUploadFile</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">SPIFFS</span><span style="color: #434f54;">.</span><span style="color: #d35400;">open</span><span style="color: #000000;">(</span><span style="color: #000000;">path</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"w"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>            <span style="color: #434f54;">// Open the file for writing in SPIFFS (create if it doesn't exist)</span>
    <span style="color: #000000;">path</span> <span style="color: #434f54;">=</span> <span style="color: #00979c;">String</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">upload</span><span style="color: #434f54;">.</span><span style="color: #d35400;">status</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">UPLOAD_FILE_WRITE</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span>
    <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">fsUploadFile</span><span style="color: #000000;">)</span>
      <span style="color: #000000;">fsUploadFile</span><span style="color: #434f54;">.</span><span style="color: #d35400;">write</span><span style="color: #000000;">(</span><span style="color: #000000;">upload</span><span style="color: #434f54;">.</span><span style="color: #000000;">buf</span><span style="color: #434f54;">,</span> <span style="color: #000000;">upload</span><span style="color: #434f54;">.</span><span style="color: #000000;">currentSize</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span> <span style="color: #434f54;">// Write the received bytes to the file</span>
  <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">upload</span><span style="color: #434f54;">.</span><span style="color: #d35400;">status</span> <span style="color: #434f54;">==</span> <span style="color: #000000;">UPLOAD_FILE_END</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span>
    <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">fsUploadFile</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>                                    <span style="color: #434f54;">// If the file was successfully created</span>
      <span style="color: #000000;">fsUploadFile</span><span style="color: #434f54;">.</span><span style="color: #d35400;">close</span><span style="color: #000000;">(</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                               <span style="color: #434f54;">// Close the file again</span>
      <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">print</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"handleFileUpload Size: "</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span> <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">println</span><span style="color: #000000;">(</span><span style="color: #000000;">upload</span><span style="color: #434f54;">.</span><span style="color: #000000;">totalSize</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
      <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #000000;">sendHeader</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"Location"</span><span style="color: #434f54;">,</span><span style="color: #005c5f;">"/success.html"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>      <span style="color: #434f54;">// Redirect the client to the success page</span>
      <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">send</span><span style="color: #000000;">(</span><span style="color: #000000;">303</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #000000;">{</span>
      <span style="color: #000000;">server</span><span style="color: #434f54;">.</span><span style="color: #d35400;">send</span><span style="color: #000000;">(</span><span style="color: #000000;">500</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"text/plain"</span><span style="color: #434f54;">,</span> <span style="color: #005c5f;">"500: couldn't create file"</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">}</span>
  <span style="color: #000000;">}</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">webSocketEvent</span><span style="color: #000000;">(</span><span style="color: #00979c;">uint8_t</span> <span style="color: #000000;">num</span><span style="color: #434f54;">,</span> <span style="color: #000000;">WStype_t</span> <span style="color: #000000;">type</span><span style="color: #434f54;">,</span> <span style="color: #00979c;">uint8_t</span> <span style="color: #434f54;">*</span> <span style="color: #000000;">payload</span><span style="color: #434f54;">,</span> <b><span style="color: #d35400;">size_t</span></b> <span style="color: #000000;">lenght</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// When a WebSocket message is received</span>
  <span style="color: #5e6d03;">switch</span> <span style="color: #000000;">(</span><span style="color: #000000;">type</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <span style="color: #5e6d03;">case</span> <span style="color: #000000;">WStype_DISCONNECTED</span><span style="color: #434f54;">:</span>             <span style="color: #434f54;">// if the websocket is disconnected</span>
      <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">printf</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"[%u] Disconnected!\n"</span><span style="color: #434f54;">,</span> <span style="color: #000000;">num</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
      <span style="color: #5e6d03;">break</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">case</span> <span style="color: #000000;">WStype_CONNECTED</span><span style="color: #434f54;">:</span> <span style="color: #000000;">{</span>              <span style="color: #434f54;">// if a new websocket connection is established</span>
        <b><span style="color: #d35400;">IPAddress</span></b> <span style="color: #000000;">ip</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">webSocket</span><span style="color: #434f54;">.</span><span style="color: #d35400;">remoteIP</span><span style="color: #000000;">(</span><span style="color: #000000;">num</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
        <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">printf</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"[%u] Connected from %d.%d.%d.%d url: %s\n"</span><span style="color: #434f54;">,</span> <span style="color: #000000;">num</span><span style="color: #434f54;">,</span> <span style="color: #000000;">ip</span><span style="color: #000000;">[</span><span style="color: #000000;">0</span><span style="color: #000000;">]</span><span style="color: #434f54;">,</span> <span style="color: #000000;">ip</span><span style="color: #000000;">[</span><span style="color: #000000;">1</span><span style="color: #000000;">]</span><span style="color: #434f54;">,</span> <span style="color: #000000;">ip</span><span style="color: #000000;">[</span><span style="color: #000000;">2</span><span style="color: #000000;">]</span><span style="color: #434f54;">,</span> <span style="color: #000000;">ip</span><span style="color: #000000;">[</span><span style="color: #000000;">3</span><span style="color: #000000;">]</span><span style="color: #434f54;">,</span> <span style="color: #000000;">payload</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
        <span style="color: #000000;">rainbow</span> <span style="color: #434f54;">=</span> <span style="color: #00979c;">false</span><span style="color: #000000;">;</span>                  <span style="color: #434f54;">// Turn rainbow off when a new connection is established</span>
      <span style="color: #000000;">}</span>
      <span style="color: #5e6d03;">break</span><span style="color: #000000;">;</span>
    <span style="color: #5e6d03;">case</span> <span style="color: #000000;">WStype_TEXT</span><span style="color: #434f54;">:</span>                     <span style="color: #434f54;">// if new text data is received</span>
      <b><span style="color: #d35400;">Serial</span></b><span style="color: #434f54;">.</span><span style="color: #d35400;">printf</span><span style="color: #000000;">(</span><span style="color: #005c5f;">"[%u] get Text: %s\n"</span><span style="color: #434f54;">,</span> <span style="color: #000000;">num</span><span style="color: #434f54;">,</span> <span style="color: #000000;">payload</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
      <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">payload</span><span style="color: #000000;">[</span><span style="color: #000000;">0</span><span style="color: #000000;">]</span> <span style="color: #434f54;">==</span> <span style="color: #00979c;">'#'</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>            <span style="color: #434f54;">// we get RGB data</span>
        <span style="color: #00979c;">uint32_t</span> <span style="color: #000000;">rgb</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">(</span><span style="color: #00979c;">uint32_t</span><span style="color: #000000;">)</span> <span style="color: #d35400;">strtol</span><span style="color: #000000;">(</span><span style="color: #000000;">(</span><span style="color: #00979c;">const</span> <span style="color: #00979c;">char</span> <span style="color: #434f54;">*</span><span style="color: #000000;">)</span> <span style="color: #434f54;">&amp;</span><span style="color: #000000;">payload</span><span style="color: #000000;">[</span><span style="color: #000000;">1</span><span style="color: #000000;">]</span><span style="color: #434f54;">,</span> <span style="color: #00979c;">NULL</span><span style="color: #434f54;">,</span> <span style="color: #000000;">16</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>   <span style="color: #434f54;">// decode rgb data</span>
        <span style="color: #00979c;">int</span> <span style="color: #000000;">r</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">(</span><span style="color: #000000;">(</span><span style="color: #000000;">rgb</span> <span style="color: #434f54;">&gt;&gt;</span> <span style="color: #000000;">20</span><span style="color: #000000;">)</span> <span style="color: #434f54;">&amp;</span> <span style="color: #000000;">0x3FF</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                     <span style="color: #434f54;">// 10 bits per color, so R: bits 20-29</span>
        <span style="color: #00979c;">int</span> <span style="color: #000000;">g</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">(</span><span style="color: #000000;">(</span><span style="color: #000000;">rgb</span> <span style="color: #434f54;">&gt;&gt;</span> <span style="color: #000000;">10</span><span style="color: #000000;">)</span> <span style="color: #434f54;">&amp;</span> <span style="color: #000000;">0x3FF</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                     <span style="color: #434f54;">// G: bits 10-19</span>
        <span style="color: #00979c;">int</span> <span style="color: #000000;">b</span> <span style="color: #434f54;">=</span>          <span style="color: #000000;">rgb</span> <span style="color: #434f54;">&amp;</span> <span style="color: #000000;">0x3FF</span><span style="color: #000000;">;</span>                      <span style="color: #434f54;">// B: bits  0-9</span>

        <span style="color: #d35400;">analogWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_RED</span><span style="color: #434f54;">,</span>   <span style="color: #000000;">r</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>                         <span style="color: #434f54;">// write it to the LED output pins</span>
        <span style="color: #d35400;">analogWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_GREEN</span><span style="color: #434f54;">,</span> <span style="color: #000000;">g</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
        <span style="color: #d35400;">analogWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_BLUE</span><span style="color: #434f54;">,</span>  <span style="color: #000000;">b</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
      <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">payload</span><span style="color: #000000;">[</span><span style="color: #000000;">0</span><span style="color: #000000;">]</span> <span style="color: #434f54;">==</span> <span style="color: #00979c;">'R'</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>                      <span style="color: #434f54;">// the browser sends an R when the rainbow effect is enabled</span>
        <span style="color: #000000;">rainbow</span> <span style="color: #434f54;">=</span> <span style="color: #00979c;">true</span><span style="color: #000000;">;</span>
      <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">payload</span><span style="color: #000000;">[</span><span style="color: #000000;">0</span><span style="color: #000000;">]</span> <span style="color: #434f54;">==</span> <span style="color: #00979c;">'N'</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>                      <span style="color: #434f54;">// the browser sends an N when the rainbow effect is disabled</span>
        <span style="color: #000000;">rainbow</span> <span style="color: #434f54;">=</span> <span style="color: #00979c;">false</span><span style="color: #000000;">;</span>
      <span style="color: #000000;">}</span>
      <span style="color: #5e6d03;">break</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
<span style="color: #000000;">}</span></code></pre>
   </div>
   <div>
        Again, most of the code is adapted from the previous examples, only the WebSocket part is new.
   </div>
   <div>
        <br>
   </div>
   <div>
        There are different types of WebSocket messages, but we're only interested in the text type, because the JavaScript code at the client side sends the color data in text format, as a hexadecimal number, starting with a '#' sign.
   </div>
   <div>
        Each color is a 10-bit number, so in total, it gives us a 30-bit number for the RGB value.
   </div>
   <div>
        <br>
   </div>
   <div>
        When the rainbow function is enabled, JavaScript sends an 'R' character, and when it's disabled, it sends a 'N' character. 
   </div>
   <div>
        <br>
   </div>
   <div>
        Let's take a look at the HTML and JavaScript code as well:
   </div>
   <h4>HTML</h4>
   <div>
       <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;LED Control&lt;/title&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'&gt;
  &lt;link href='main.css' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"&gt;
  &lt;link rel="icon" type="image/png" sizes="144x144"  href="/favicon-144x144.png"&gt;
  &lt;link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"&gt;
  &lt;link rel="manifest" href="/manifest.json"&gt;
  &lt;meta name="theme-color" content="#00878f"&gt;
  &lt;meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'&gt;
  &lt;script src="WebSocket.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;center&gt;
    &lt;header&gt;
      &lt;h1&gt;LED Control&lt;/h1&gt;
    &lt;/header&gt;
    &lt;div&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td style="width:14.4px; text-align: right"&gt;R: &lt;/td&gt;
          &lt;td&gt;&lt;input class="enabled" id="r" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="width:14.4px; text-align: right"&gt;G: &lt;/td&gt;
          &lt;td&gt;&lt;input class="enabled" id="g" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="width:14.4px; text-align: right"&gt;B: &lt;/td&gt;
          &lt;td&gt;&lt;input class="enabled" id="b" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;p style="margin:8px 0px"&gt;
        &lt;button id="rainbow" class="button" style="background-color:#999" onclick="rainbowEffect();"&gt;Rainbow&lt;/button&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
   </div>
   <p>There's really not much to it, just 3 sliders and a button linked to JavaScript functions.</p>
   <h4>JavaScript</h4>
   <div>
       <pre><code>var rainbowEnable = false;
var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
connection.onopen = function () {
  connection.send('Connect ' + new Date());
};
connection.onerror = function (error) {
  console.log('WebSocket Error ', error);
};
connection.onmessage = function (e) {
  console.log('Server: ', e.data);
};
connection.onclose = function () {
  console.log('WebSocket connection closed');
};

function sendRGB () {
  var r = document.getElementById('r').value** 2 / 1023;
  var g = document.getElementById('g').value** 2 / 1023;
  var b = document.getElementById('b').value** 2 / 1023;

  var rgb = r &lt;&lt; 20 | g &lt;&lt; 10 | b;
  var rgbstr = '#' + rgb.toString(16);
  console.log('RGB: ' + rgbstr);
  connection.send(rgbstr);
}

function rainbowEffect () {
  rainbowEnable = ! rainbowEnable;
  if (rainbowEnable) {
    connection.send("R");
    document.getElementById('rainbow').style.backgroundColor = '#00878F';
    document.getElementById('r').className = 'disabled';
    document.getElementById('g').className = 'disabled';
    document.getElementById('b').className = 'disabled';
    document.getElementById('r').disabled = true;
    document.getElementById('g').disabled = true;
    document.getElementById('b').disabled = true;
  } else {
    connection.send("N");
    document.getElementById('rainbow').style.backgroundColor = '#999';
    document.getElementById('r').className = 'enabled';
    document.getElementById('g').className = 'enabled';
    document.getElementById('b').className = 'enabled';
    document.getElementById('r').disabled = false;
    document.getElementById('g').disabled = false;
    document.getElementById('b').disabled = false;
    sendRGB();
  }
}</code></pre>
   </div>
   <div>
        We just create a WebSocket connection object to send data to the ESP. 
   </div>
   <div>
        Then every time a slider is moved, we take the values of the three sliders and we <span style="font-size: 1em;">square the color values to get a smoother and more natural curve. We then </span><span style="font-size: 1em;">combine them into a 30-bit number (10 bits per color). Finally, the RGB value gets converted to a hexadecimal string, a '#' is added, and it's sent to the ESP.</span>
   </div>
   <div>
        When the rainbow button is pressed, the sliders are disabled, and an 'R' is sent to the ESP. When the rainbow button is pressed again, the sliders are enabled, and an 'N' is sent.
   </div>
   <h4>Helper functions</h4>
   <div>
        Back to the ESP8266 Arduino code again. We need some other functions as well, to convert bytes to KB and MB, to determine file types based on file extensions and to convert a hue angle to RGB values.
   </div>
   <div>
       <pre><code><span style="color: #00979c;">String</span> <span style="color: #000000;">formatBytes</span><span style="color: #000000;">(</span><b><span style="color: #d35400;">size_t</span></b> <span style="color: #000000;">bytes</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// convert sizes in bytes to KB and MB</span>
  <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">bytes</span> <span style="color: #434f54;">&lt;</span> <span style="color: #000000;">1024</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <span style="color: #5e6d03;">return</span> <span style="color: #00979c;">String</span><span style="color: #000000;">(</span><span style="color: #000000;">bytes</span><span style="color: #000000;">)</span> <span style="color: #434f54;">+</span> <span style="color: #005c5f;">"B"</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">bytes</span> <span style="color: #434f54;">&lt;</span> <span style="color: #000000;">(</span><span style="color: #000000;">1024</span> <span style="color: #434f54;">*</span> <span style="color: #000000;">1024</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <span style="color: #5e6d03;">return</span> <span style="color: #00979c;">String</span><span style="color: #000000;">(</span><span style="color: #000000;">bytes</span> <span style="color: #434f54;">/</span> <span style="color: #000000;">1024.0</span><span style="color: #000000;">)</span> <span style="color: #434f54;">+</span> <span style="color: #005c5f;">"KB"</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">bytes</span> <span style="color: #434f54;">&lt;</span> <span style="color: #000000;">(</span><span style="color: #000000;">1024</span> <span style="color: #434f54;">*</span> <span style="color: #000000;">1024</span> <span style="color: #434f54;">*</span> <span style="color: #000000;">1024</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span>
    <span style="color: #5e6d03;">return</span> <span style="color: #00979c;">String</span><span style="color: #000000;">(</span><span style="color: #000000;">bytes</span> <span style="color: #434f54;">/</span> <span style="color: #000000;">1024.0</span> <span style="color: #434f54;">/</span> <span style="color: #000000;">1024.0</span><span style="color: #000000;">)</span> <span style="color: #434f54;">+</span> <span style="color: #005c5f;">"MB"</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">String</span> <span style="color: #000000;">getContentType</span><span style="color: #000000;">(</span><span style="color: #00979c;">String</span> <span style="color: #000000;">filename</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// determine the filetype of a given filename, based on the extension</span>
  <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">filename</span><span style="color: #434f54;">.</span><span style="color: #d35400;">endsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">".html"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #5e6d03;">return</span> <span style="color: #005c5f;">"text/html"</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">filename</span><span style="color: #434f54;">.</span><span style="color: #d35400;">endsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">".css"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #5e6d03;">return</span> <span style="color: #005c5f;">"text/css"</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">filename</span><span style="color: #434f54;">.</span><span style="color: #d35400;">endsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">".js"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #5e6d03;">return</span> <span style="color: #005c5f;">"application/javascript"</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">filename</span><span style="color: #434f54;">.</span><span style="color: #d35400;">endsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">".ico"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #5e6d03;">return</span> <span style="color: #005c5f;">"image/x-icon"</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span> <span style="color: #000000;">(</span><span style="color: #000000;">filename</span><span style="color: #434f54;">.</span><span style="color: #d35400;">endsWith</span><span style="color: #000000;">(</span><span style="color: #005c5f;">".gz"</span><span style="color: #000000;">)</span><span style="color: #000000;">)</span> <span style="color: #5e6d03;">return</span> <span style="color: #005c5f;">"application/x-gzip"</span><span style="color: #000000;">;</span>
  <span style="color: #5e6d03;">return</span> <span style="color: #005c5f;">"text/plain"</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span>

<span style="color: #00979c;">void</span> <span style="color: #000000;">setHue</span><span style="color: #000000;">(</span><span style="color: #00979c;">int</span> <span style="color: #000000;">hue</span><span style="color: #000000;">)</span> <span style="color: #000000;">{</span> <span style="color: #434f54;">// Set the RGB LED to a given hue (color) (0° = Red, 120° = Green, 240° = Blue)</span>
  <span style="color: #000000;">hue</span> <span style="color: #434f54;">%=</span> <span style="color: #000000;">360</span><span style="color: #000000;">;</span>                   <span style="color: #434f54;">// hue is an angle between 0 and 359°</span>
  <span style="color: #00979c;">float</span> <span style="color: #000000;">radH</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">hue</span><span style="color: #434f54;">*</span><span style="color: #000000;">3.142</span><span style="color: #434f54;">/</span><span style="color: #000000;">180</span><span style="color: #000000;">;</span>   <span style="color: #434f54;">// Convert degrees to radians</span>
  <span style="color: #00979c;">float</span> <span style="color: #000000;">rf</span><span style="color: #434f54;">,</span> <span style="color: #000000;">gf</span><span style="color: #434f54;">,</span> <span style="color: #000000;">bf</span><span style="color: #000000;">;</span>
  
  <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">hue</span><span style="color: #434f54;">&gt;=</span><span style="color: #000000;">0</span> <span style="color: #434f54;">&amp;&amp;</span> <span style="color: #000000;">hue</span><span style="color: #434f54;">&lt;</span><span style="color: #000000;">120</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span>        <span style="color: #434f54;">// Convert from HSI color space to RGB              </span>
    <span style="color: #000000;">rf</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">cos</span><span style="color: #000000;">(</span><span style="color: #000000;">radH</span><span style="color: #434f54;">*</span><span style="color: #000000;">3</span><span style="color: #434f54;">/</span><span style="color: #000000;">4</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">gf</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">sin</span><span style="color: #000000;">(</span><span style="color: #000000;">radH</span><span style="color: #434f54;">*</span><span style="color: #000000;">3</span><span style="color: #434f54;">/</span><span style="color: #000000;">4</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">bf</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">0</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">hue</span><span style="color: #434f54;">&gt;=</span><span style="color: #000000;">120</span> <span style="color: #434f54;">&amp;&amp;</span> <span style="color: #000000;">hue</span><span style="color: #434f54;">&lt;</span><span style="color: #000000;">240</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span>
    <span style="color: #000000;">radH</span> <span style="color: #434f54;">-=</span> <span style="color: #000000;">2.09439</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">gf</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">cos</span><span style="color: #000000;">(</span><span style="color: #000000;">radH</span><span style="color: #434f54;">*</span><span style="color: #000000;">3</span><span style="color: #434f54;">/</span><span style="color: #000000;">4</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">bf</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">sin</span><span style="color: #000000;">(</span><span style="color: #000000;">radH</span><span style="color: #434f54;">*</span><span style="color: #000000;">3</span><span style="color: #434f54;">/</span><span style="color: #000000;">4</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">rf</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">0</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span> <span style="color: #5e6d03;">else</span> <span style="color: #5e6d03;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">hue</span><span style="color: #434f54;">&gt;=</span><span style="color: #000000;">240</span> <span style="color: #434f54;">&amp;&amp;</span> <span style="color: #000000;">hue</span><span style="color: #434f54;">&lt;</span><span style="color: #000000;">360</span><span style="color: #000000;">)</span><span style="color: #000000;">{</span>
    <span style="color: #000000;">radH</span> <span style="color: #434f54;">-=</span> <span style="color: #000000;">4.188787</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">bf</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">cos</span><span style="color: #000000;">(</span><span style="color: #000000;">radH</span><span style="color: #434f54;">*</span><span style="color: #000000;">3</span><span style="color: #434f54;">/</span><span style="color: #000000;">4</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">rf</span> <span style="color: #434f54;">=</span> <span style="color: #d35400;">sin</span><span style="color: #000000;">(</span><span style="color: #000000;">radH</span><span style="color: #434f54;">*</span><span style="color: #000000;">3</span><span style="color: #434f54;">/</span><span style="color: #000000;">4</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
    <span style="color: #000000;">gf</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">0</span><span style="color: #000000;">;</span>
  <span style="color: #000000;">}</span>
  <span style="color: #00979c;">int</span> <span style="color: #000000;">r</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">rf</span><span style="color: #434f54;">*</span><span style="color: #000000;">rf</span><span style="color: #434f54;">*</span><span style="color: #000000;">1023</span><span style="color: #000000;">;</span>
  <span style="color: #00979c;">int</span> <span style="color: #000000;">g</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">gf</span><span style="color: #434f54;">*</span><span style="color: #000000;">gf</span><span style="color: #434f54;">*</span><span style="color: #000000;">1023</span><span style="color: #000000;">;</span>
  <span style="color: #00979c;">int</span> <span style="color: #000000;">b</span> <span style="color: #434f54;">=</span> <span style="color: #000000;">bf</span><span style="color: #434f54;">*</span><span style="color: #000000;">bf</span><span style="color: #434f54;">*</span><span style="color: #000000;">1023</span><span style="color: #000000;">;</span>
  
  <span style="color: #d35400;">analogWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_RED</span><span style="color: #434f54;">,</span>   <span style="color: #000000;">r</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>    <span style="color: #434f54;">// Write the right color to the LED output pins</span>
  <span style="color: #d35400;">analogWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_GREEN</span><span style="color: #434f54;">,</span> <span style="color: #000000;">g</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
  <span style="color: #d35400;">analogWrite</span><span style="color: #000000;">(</span><span style="color: #000000;">LED_BLUE</span><span style="color: #434f54;">,</span>  <span style="color: #000000;">b</span><span style="color: #000000;">)</span><span style="color: #000000;">;</span>
<span style="color: #000000;">}</span></code></pre>
   </div>
   <div>
        To convert from hue to RGB, we use sines and cosines, because the sum of their squares is always one, so the total intensity will always be more or less the same.
   </div>
   <div>
        <br>
   </div>
   <div>
        This results in the following RGB curves:
   </div>
   <div>
        <a href="../Images/RGB_rainbow.png" title="RGB_rainbow.png"><img src="../Images/thumbs/RGB_rainbow.png" alt="RGB_rainbow.png"></a>
   </div>
   <div>
        <br>
   </div>
   <h3>Using the example</h3>
   <div>
        Download the example from <a href="https://github.com/tttapa/ESP8266/tree/master/Examples/14.%20WebSocket/A-WebSocket_LED_control">GitHub</a> and open it in the Arduino IDE. Then add your Wi-Fi credentials (lines 83-85).
   </div>
   <div>
        Connect an RGB LED with red to pin 15, green to pin 12 and blue to pin 13. Don't forget the current limiting resistors!
   </div>
   <div>
        Select the SPIFFS size (64KB should be enough, but if you want to upload more files later, you should set it higher). Upload the sketch over Serial, and then upload the SPIFFS files using Tools &gt; ESP8266 Sketch Data Upload.
   </div>
   <div>
        <br>
   </div>
   <div>
        Wait for it to connect to a Wi-Fi network, or connect to the ESP8266 Access Point using the password 'thereisnospoon', and go to <a href="http://esp8266.local">http://esp8266.local</a>. You should get a page that looks like this:
   </div>
   <div>
        <br>
   </div>
    <a href="../Images/LED_Control.png" title="LED_Control.png"><img src="../Images/thumbs/LED_Control.png" alt="LED_Control.png"></a>
   <div>
        Use the sliders to adjust the color levels of the LED, and press the Rainbow button to enable the rainbow effect.
   </div>
   <div>
        <br>
   </div>
   <div>
        If you go to <a href="http://esp8266.local/edit.html">http://esp8266.local/edit.html</a>, you can upload or update files:
   </div>
    <a href="../Images/Edit.png" title="Edit.png"><img src="../Images/thumbs/Edit.png" alt="Edit.png"></a>
<hr>
            <div class="back"><a href="Chap13 - OTA.html">← Previous chapter</a></div>
            <div class="next"><a href="Chap15 - NTP.html">Next chapter →</a></div>
            <div class="backArr"><a href="Chap13 - OTA.html"><i class="material-icons">arrow_back</i></a></div>
            <div class="nextArr"><a href="Chap15 - NTP.html"><i class="material-icons">arrow_forward</i></a></div>
        </article>
    </body>
</html>
